<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ScrollReveal 示例</title>
    <style>
      #wrapper {
        height: 400px;
        background-color: aqua;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <h1 class="headline">页面缓入效果插件</h1>

      <div>
        <dd class="ceshi">1</dd>
        <dd class="ceshi">2</dd>
        <dd class="ceshi">3</dd>
        <dd class="ceshi">4</dd>
        <dd class="ceshi">5</dd>
        <dd class="ceshi">6</dd>
      </div>
    </div>
    <script src="https://unpkg.com/scrollreveal"></script>
    <script>
      // 简单使用
      // ScrollReveal().reveal(".headline");

      // 1).设置动画配置信息
      var config = {
        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
        origin: "bottom", // 动画开始的方向
        distance: "300px", //移动距离
        duration: 1000, // 动画持续时间
        delay: 0, // 延迟
        rotate: { x: 0, y: 0, z: 0 }, // 过度到0的初始角度，关键点想要酷炫的样式主要修改此参数
        container: document.documentElement,
        opacity: 0, // 初始透明度
        scale: 0.8,
        viewFactor: 100, //视角，可拉长看到的距离
        viewOffset: {
          //可看到的范围，全屏往里缩
          top: 150,
          right: 0,
          bottom: 150,
          left: 0,
        },
        // 回调函数
        //当动画开始之前会被触发
        beforeReveal: function (domEl) {
          console.log("动画执行了");
        },
        //鼠标滚轮滚动之前会被触发
        beforeReset: function (domEl) {
          console.log("滚轮开始---");
        },
        //动画开始之后会被触发
        afterReveal: function (domEl) {
          console.log("动画结束了");
        },
        //滚轮滚动之后会被触发
        afterReset: function (domEl) {
          console.log("滚轮结束了");
        },
      };

      // 2).然后实例化一个scrollReveal对象
      window.sr = ScrollReveal();

      // 3).再调用scrollReveal里的reveal方法将scrollReveal内部的动画和css中的标签关联起来
      sr.reveal(".ceshi", config);
      //参数一：跟html标签关联的类名
      //参数二：动画配置
    </script>
  </body>
</html>
